<style type="text/css">
#memberAddressDiv{width:898px; margin: 0 auto; overflow: auto; padding:25px; border:1px solid #CCC;}
#memberAddressDiv table{width:100%;}
#addressList td{text-align:left; vertical-align:top;}
#addressList .addressTr td{padding-top: 25px;}
/* #addressList .addressRadioTd{width:20px;} */
#addressList .addressDetailTd{/* width:450px; height:20px; */}
#addressList .addressDetailTd div{padding-bottom: 20px;}
#addressList .addressActionTd{width:130px;}
#addressList .addressActionTd div{padding-bottom:20px;}
#addressList .updateAddressTable th{width:180px; padding-bottom: 10px; text-align:right;  vertical-align:top;}
#addressList .updateAddressTable td{padding-bottom: 25px; text-align:left; vertical-align:top;}
#addressList .updateAddressTable select{width:580px; padding-left: 10px; padding-right: 50px; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
#memberAddressDiv #addressForm table th{width:180px; padding-bottom: 10px; text-align:right; vertical-align:top;}
#memberAddressDiv #addressForm table td{padding-bottom: 20px; text-align:left; vertical-align:top;}
#memberAddressDiv #addressForm table select{width:580px; padding-left: 10px; padding-right: 50px; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
.arrow-down{position:relative; left: -55px; top:-5px;  display: inline-block; border: solid black; border-width: 0 3px 3px 0; padding: 7.5px; margin-right: 12.5px; margin-left: 12.5px; transform: rotate(45deg); -webkit-transform: rotate(45deg);
}
#memberAddressDiv .select_div{margin-bottom:20px;}
#memberAddressDiv a#toggleAddressForm{display:inline-block; width:200px; margin:25px; padding:20px; text-align:center; color:#fff; background:#06f;}
#memberAddressDiv .address_input{width:300px; border:2px solid #ccc;}
#memberAddressDiv .receiveAddress{width:580px; border:2px solid #ccc;}
</style>

<div id="memberAddressDiv">
	<?php if(!empty($view_data['address_list'])): ?>
    <table id="addressList">
    	<?php $address_i = 0; ?>
		<?php foreach ($view_data['address_list'] as $address): ?>
        <?php $address_i++ ?>
    	<tr id="addressTr-<?php echo $address['id']; ?>" class="addressTr">
            <td class="addressDetailTd">
                <div><?php echo $address['province_name']; ?>&nbsp;<?php echo $address['city_name']; ?>&nbsp;<?php echo $address['district_name']; ?>&nbsp;<?php echo $address['street_name']; ?>&nbsp;</div>
                <div><?php echo $address['address']; ?></div>
                <div>
                    <span><?php echo $address['receiver']; ?></span>
                    <span><?php echo $address['mobile']; ?></span>
                    <span><?php echo $address['tel']; ?></span>
                </div>
            </td>
            <td class="addressActionTd">
            	<div><a href="javascript:void(0);" onclick="toggleUpdateAddressTr('<?php echo $address['id']; ?>')">修改</a>&nbsp;</div>
                <div><a href="javascript:void(0);" onclick="deleteAddress('<?php echo $address['id']; ?>')">删除</a>&nbsp;</div>
                <div><a href="javascript:void(0);" id="setDefaultAddressId-<?php echo $address['id']; ?>" class="setDefaultAddressId" <?php if($address['id'] == $view_data['session_member_info']['default_address_id']): ?>style="display:none;"<?php endif; ?> onclick="setDefaultAddressId('<?php echo $address['id']; ?>');">设为默认</a></div>
            </td>
        </tr>
        <tr id="updateAddressTr-<?php echo $address['id']; ?>" style="display:none;">
        	<td colspan="6">
                <form id="updateAddressForm-<?php echo $address['id']; ?>" action="<?php echo $this->get_url(array('route' => 'member_address_update'), true); ?>" method="post" onsubmit="return updateAddress('<?php echo $address['id']; ?>');">
                    <table class="updateAddressTable">
                        <tr>
                            <th>收货地址：</th>
                            <td>

                                <div class="select_div">
                                    <select name="province_id" id="province_id-<?php echo $address['id']; ?>" onchange="loadRegion('province_id-<?php echo $address['id']; ?>', 2, 'city_id-<?php echo $address['id']; ?>');">
                                        <option value="0">省/直辖市</option>

                                        <?php foreach ($view_data['province_list'] as $province): ?>
                                        <option value="<?php echo $province['id']; ?>" <?php if($province['id'] == $address['province_id']): ?>selected="selected"<?php endif; ?>><?php echo $province['name']; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                    <i class="arrow-down"></i>
                                </div>

                                <div class="select_div">
                                    <select name="city_id" id="city_id-<?php echo $address['id']; ?>" onchange="loadRegion('city_id-<?php echo $address['id']; ?>', 3, 'district_id-<?php echo $address['id']; ?>');">
                                        <option value="0">市</option>

                                        <?php foreach ($address['city_list'] as $city): ?>
                                        <option value="<?php echo $city['id']; ?>" <?php if($city['id'] == $address['city_id']): ?>selected="selected"<?php endif; ?>><?php echo $city['name']; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                    <i class="arrow-down"></i>
                                </div>

                                <div class="select_div">
                                    <select name="district_id" id="district_id-<?php echo $address['id']; ?>" onchange="loadRegion('district_id-<?php echo $address['id']; ?>', 4, 'street_id-<?php echo $address['id']; ?>');">
                                        <option value="0">区/县</option>

                                        <?php foreach ($address['district_list'] as $district): ?>
                                        <option value="<?php echo $district['id']; ?>" <?php if($district['id'] == $address['district_id']): ?>selected="selected"<?php endif; ?>><?php echo $district['name']; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                    <i class="arrow-down"></i>
                                </div>

                                <div class="select_div">
                                    <?php if(!empty($address['street_id'])): ?>
                                    <select name="street_id" id="street_id-<?php echo $address['id']; ?>">
                                        <option value="0">街道/镇</option>

                                        <?php foreach ($address['street_list'] as $street): ?>
                                        <option value="<?php echo $street['id']; ?>" <?php if($street['id'] == $address['street_id']): ?>selected="selected"<?php endif; ?>><?php echo $street['name']; ?></option>
                                        <?php endforeach; ?>
                                    </select>

                                    <?php else: ?>
                                    <select name="street_id" id="street_id-<?php echo $address['id']; ?>" disabled="disabled">
                                        <option value=0>不用选</option>
                                    </select>
                                    <?php endif; ?>
                                    <i class="arrow-down"></i>
                                </div>

                            </td>
                        </tr>

                        <tr>
                            <th></th>
                            <td><input id="receiveAddress-<?php echo $address['id']; ?>" class="receiveAddress" name="receive_address" type="text" value="<?php echo $address['address']; ?>" /></td>
                        </tr>

                        <tr>
                            <th>收货人：</th>
                            <td><input id="receiver-<?php echo $address['id']; ?>" class="address_input" name="receiver" type="text" value="<?php echo $address['receiver']; ?>" /></td>
                        </tr>
                        <tr>
                            <th>手机：</th>
                            <td><input id="receiveMobile-<?php echo $address['id']; ?>" class="address_input" name="receive_mobile" type="text" value="<?php echo $address['mobile']; ?>" /></td>
                        </tr>
                        <tr>
                            <th>电话：</th>
                            <td><input id="receiveTel-<?php echo $address['id']; ?>" class="address_input" name="receive_tel" type="text" value="<?php echo $address['tel']; ?>" /></td>
                        </tr>
                        
                        <tr>
                            <th></th>
                            <td>
                                <input id="addressId-<?php echo $address['id']; ?>" name="address_id" type="hidden" value="<?php echo $address['id']; ?>" />
                                <input id="updateAddressSubmit-<?php echo $address['id']; ?>" name="updateAddressSubmit" type="submit" value="确定" />
                                <input id="updateAddressCancel-<?php echo $address['id']; ?>" name="updateAddressCancel" type="button" value="取消" onclick="hideUpdateAddressTr('<?php echo $address['id']; ?>');" />

                                <div class="form_error_message">
                                    <span class="form_error_message_mark">!</span>
                                    <span class="form_error_message_content"></span>
                                </div>
                            </td>
                        </tr>
                    </table>  
                </form>
            </td>
        </tr>
        <?php endforeach; ?>
    </table>
    <?php endif; ?>   
     
    <blockquote id="addressBlockquote">
    	<p><a id="toggleAddressForm" href="javascript:void(0);" onclick="toggleAddressForm();">新增收货地址</a></p>
        <form id="addressForm" action="<?php echo $this->get_url(array('route' => 'member_address_add'), true); ?>" method="post" onsubmit="return addAddress();" <?php if(!empty($view_data['address_list'])): ?>style="display:none;"<?php endif; ?>>
            <table>
                <tr>
                    <th>收货地址：</th>
                    <td>

                        <div class="select_div">
                            <select name="province_id" id="province_id" onchange="loadRegion('province_id', 2, 'city_id');">
                                <option value="0">省/直辖市</option>

                                <?php foreach ($view_data['province_list'] as $province): ?>
                                <option value="<?php echo $province['id']; ?>"><?php echo $province['name']; ?></option>
                                <?php endforeach; ?>

                            </select>
                            <i class="arrow-down"></i>
                        </div>

                        <div class="select_div">
                            <select name="city_id" id="city_id" onchange="loadRegion('city_id', 3, 'district_id');">
                                <option value="0">市</option>
                            </select>
                            <i class="arrow-down"></i>
                        </div>

                        <div class="select_div">
                            <select name="district_id" id="district_id" onchange="loadRegion('district_id', 4, 'street_id');">
                                <option value="0">区/县</option>
                            </select>
                            <i class="arrow-down"></i>
                        </div>

                        <div class="select_div">
                            <select name="street_id" id="street_id">
                                <option value="0">街道/镇</option>
                            </select>
                            <i class="arrow-down"></i>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td><input id="receiveAddress" class="receiveAddress" name="receive_address" type="text" value="" /></td>
                </tr>

                <tr>
                    <th>收货人：</th>
                    <td><input id="receiver" class="address_input" name="receiver" type="text" value="" /></td>
                </tr>
                <tr>
                    <th>手机：</th>
                    <td><input id="receiveMobile" class="address_input" name="receive_mobile" type="text" value="" /></td>
                </tr>
                <tr>
                    <th>电话：</th>
                    <td><input id="receiveTel" class="address_input" name="receive_tel" type="text" value="" /></td>
                </tr>
                
                <tr>
                    <th></th>
                    <td>
                        <input id="addAddressSubmit" name="addAddressSubmit" type="submit" value="确定" />
                        <input id="addAddressCancel" name="addAddressCancel" type="button" value="取消" onclick="hideAddressForm();" />

                        <div class="form_error_message">
                            <span class="form_error_message_mark">!</span>
                            <span class="form_error_message_content"></span>
                        </div>
                    </td>
                </tr>
            </table>  
        </form>
    </blockquote>    
</div>

<script type="text/javascript">

//用于【onchange】
function loadRegion(parentSelName, level, selName){
    var pid = $("#" + parentSelName).val();

    loadRegionByPid(pid, level, selName);
}


function loadRegionByPid(pid, level, selName){
    if(pid != 1){

        var removeOptionSelNameListLookup = {
            '2': ['city_id', 'district_id', 'street_id'],
            '3': ['district_id', 'street_id'],
            '4': ['street_id'],
        };

        var removeOptionSelNameList = removeOptionSelNameListLookup[level];
        $.each(removeOptionSelNameList, function (selNameIdx, selNameItem) {
            if(selNameIdx == 0){
                var removeOptionSelName = selName;
            }else{
                var reg = new RegExp(removeOptionSelNameList[0]);
                var removeOptionSelName = selName.replace(reg, selNameItem);
            }
            $("#" + removeOptionSelName).removeAttr('disabled');
            $("#" + removeOptionSelName + " option").each(function () {
                $(this).remove();
            });

            $("<option value=0>请选择</option>").appendTo($("#" + removeOptionSelName));
        });

        if(pid == 0){
            return;
        }
    }


    var url_params_json = <?php echo $this->get_url_params_json(array('route' => 'address_region_get_region_list'), true); ?>;
    url_params_json['pid'] = pid;
    url_params_json['level'] = level;
    var url = wwy_get_url(url_params_json);

    $.ajax({
        type: 'GET',
        url: url,
        //data: {pid:pid, level:level},
        data: '',
        dataType: 'json',
        success: function (rdata) {
            if (rdata.status <= 0) {
                var parent_form_id = $("#" + selName).parents('form').attr('id');
                //alert(parent_form_id); return false;
                show_form_error_message(rdata.message, '#' + parent_form_id);
            } else {
                region_list = rdata.data.region_list;
                if (region_list.length > 0) {
                    $.each(region_list, function (idx, item) {
                        $("<option value=" + item.id + ">" + item.name + "</option>").appendTo($("#" + selName));
                    });
                }else{
                    $("#"+selName).html('<option value=0>不用选</option>');
                    $("#"+selName).attr('disabled', 'disabled');
                }
            }

            return false;
        }
    });
}

function addAddress(){
	var postUrl = '<?php echo $this->get_url(array('route' => 'member_address_add'), true); ?>';
    var form_id = '#addressForm';
		
	$.ajax({
		type: 'POST',
		url: postUrl,
		data: $(form_id).serialize(),
		dataType: 'json',
		success: function(rdata){			
			if(rdata.status <= 0){
				//alert(rdata.message);
                show_form_error_message(rdata.message, form_id);
			}else{
//				alert(rdata.message);
//				window.location.reload();
                show_prompt_message(rdata.message, function(){
                    window.location.reload();
                });
			}	
			
			return false;	
		}
	});
	
	return false;
}

function updateAddress(addressId){
	var postUrl = '<?php echo $this->get_url(array('route' => 'member_address_update'), true); ?>';
    var form_id = '#updateAddressForm-' + addressId;
	
	$.ajax({
		type: 'POST',
		url: postUrl,
		data: $(form_id).serialize(),
		dataType: 'json',
		success: function(rdata){			
			if(rdata.status <= 0){
				//alert(rdata.message);
                show_form_error_message(rdata.message, form_id);
			}else{
//				alert(rdata.message);
//				window.location.reload();
                show_prompt_message(rdata.message, function(){
                    window.location.reload();
                });
			}	
			
			return false;	
		}
	});
	
	return false;
}

function deleteAddress(addressId){
	//if(confirm('确定删除?')){
    confirm_prompt_message('确定删除?', function(){
		$.ajax({
			type: 'POST',
			url: '<?php echo $this->get_url(array('route' => 'member_address_delete'), true); ?>',
			data: 'address_id=' + addressId,
			dataType: 'json',
			success: function(rdata){			
				if(rdata.status <= 0){
					//alert(rdata.message);
                    show_prompt_message(rdata.message);
				}else{
					//alert(rdata.message);
                    show_prompt_message(rdata.message);
					$('#addressTr-' + addressId).remove();
					$('#updateAddressTr-' + addressId).remove();
				}	
				
				return false;	
			}
		});
	//}
    });
	
	return false;
}

function toggleAddressForm(){
	$('#addressForm').toggle();
}

function hideAddressForm(){
	$('#addressForm').hide();
}

function toggleUpdateAddressTr(addressId){
	$('#updateAddressTr-' + addressId).toggle();
    //loadProvince('province_id-' + addressId);
}

function hideUpdateAddressTr(addressId){
	$('#updateAddressTr-' + addressId).hide();
}

function setDefaultAddressId(addressId){
	$.ajax({
		type: 'POST',
		url: '<?php echo $this->get_url(array('route' => 'member_address_set_default'), true); ?>',
		data: 'address_id=' + addressId,
		dataType: 'json',
		success: function(rdata){			
			if(rdata.status <= 0){
				//alert(rdata.message);
                show_prompt_message(rdata.message);
			}else{
				//alert(rdata.message);
                show_prompt_message(rdata.message);
				$('#addressRadio-' + addressId).attr('checked', 'checked');
				$('.setDefaultAddressId').each(function(index, element) {					
                    if($(element).attr('id') == 'setDefaultAddressId-' + addressId){
						$(element).hide();
					}else{
						$(element).show();
					}
                });
			}	
			
			return false;	
		}
	});
	
	return false;
}

$(function(){
    //loadProvince('province_id');
});
</script>